<template>
	<view>
    <uni-list class="welder-outline">
      <uni-list-item
				:title="welder.F_RealName"
				:rightText="welder.F_LicenseType"
				rightColor="#DC2115">
				<view class="number-content">
					<view class="number-title">工号</view>
					<view class="number-detail">{{welder.F_WelderCode}}</view>
				</view>
			</uni-list-item>
    </uni-list>
    <top-tabbar ref="topTabbar" :tabBars="tabBars" @clickItem="clickItem"></top-tabbar>
    <divider></divider>
    <view class="welder-detail" v-if="tabIndex === 0">
      <section-title line-color="#DC2115" title="基本信息"></section-title>
      <uni-list class="welder-map">
        <uni-list-item title="姓名" :rightText="welder.F_RealName"/>
        <uni-list-item title="证件类型" :rightText="welder.F_LicenseType"/>
        <uni-list-item title="焊工工号" :rightText="welder.F_WelderCode"/>
        <uni-list-item title="到期时间" :rightText="welder.F_ExpireTime"/>
        <uni-list-item title="性别" :rightText="welder.F_Gender"/>
        <uni-list-item title="生日" :rightText="welder.F_Birthday"/>
        <uni-list-item title="手机号" :rightText="welder.F_Mobile"/>
      </uni-list>
    </view>
    <view class="welder-code" v-if="tabIndex === 1">
      <section-title line-color="#DC2115" title="精简信息"></section-title>
      <uni-list class="welder-map">
        <uni-list-item title="姓名" :rightText="welder.F_RealName"/>
        <uni-list-item title="证件类型" :rightText="welder.F_LicenseType"/>
        <uni-list-item title="焊工工号" :rightText="welder.F_WelderCode"/>
        <uni-list-item title="到期时间" :rightText="welder.F_ExpireTime"/>
      </uni-list>
      <divider></divider>
      <section-title line-color="#DC2115" title="扫码"></section-title>
      <uni-list class="welder-map">
        <uni-list-item title="二维码" rightImage="/static/image/common/code/qrcode.png" @click="toQrCode"/>
        <uni-list-item title="条形码" rightImage="/static/image/common/code/barcode.png" @click="toBarCode"/>
      </uni-list>
    </view>
    <message ref="message"></message>
	</view>
</template>

<script>
  import uniList from '@/components/uni/uni-list.vue'
  import uniListItem from '@/components/uni/uni-list-item.vue'
  import topTabbar from "../../components/topTabbar";
  import divider from "../../components/divider";
  import sectionTitle from "../../components/section-title"

  import store from "@/store/index.js"

	export default {
		data() {
			return {
				welder: {},
        tabBars: [{name: '基本信息'}, {name: '扫码'}],
        tabIndex: 0,
			}
		},
		methods: {
      /**
       * 点击顶部选项卡调用的方法
       * @param index 选项卡的索引值
       */
      clickItem(index) {
        this.tabIndex = index;
      },
      /**
       * 跳转至二维码界面
       */
      toQrCode() {
        let type = this.welder.F_LicenseType;
        let welderNum = this.welder.F_WelderCode;
        let name = this.welder.F_RealName;
        uni.navigateTo({
          url: `/pages/welder/code?codeType=1&type=${type}&welderNum=${welderNum}&name=${name}`
        })
      },
      /**
       * 跳转至条形码界面
       */
      toBarCode() {
       let type = this.welder.F_LicenseType;
       let welderNum = this.welder.F_WelderCode;
       let name = this.welder.F_RealName;
       uni.navigateTo({
         url: `/pages/welder/code?codeType=2&type=${type}&welderNum=${welderNum}&name=${name}`
       })
      }
		},
    onLoad(options) {
		  this.$nextTick(() => {
        this.$refs.topTabbar.changeTab(0)
      })
      this.welder = JSON.parse(decodeURIComponent(options.welder))
    },
    components: {
      divider, uniList, uniListItem, topTabbar, sectionTitle
    },
    onReady() {
      this.$refs.message.setMessageToStore(this.$refs.message)
    },
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
  @import "~@/static/css/welder/detail.scss";
</style>

<style>
	/* #ifndef APP-NVUE */
	page {
		background: #f5f5f5;
	}
	/* #endif */
</style>
